<template>
	<view>
		<ttBar title="查看课表" leftIcon="icon-back"></ttBar>
		<uni-calendar :insert="true" :showMonth="false" :selected="dottedList" @monthSwitch="monthChange"  @change="change" />
		
		
		<view class="tableList" v-if="showList.length && isShow">
			<block v-for="(item,index) in showList">
				<view class="row" :key="index">
					<view class="rowItem">
						<text class="iconfont icon-zhuye"></text>
						<text class="label">店铺：</text>
						<text class="value">{{item.storeName}}</text>
					</view>
					<view class="rowItem">
						<text class="iconfont icon-xiangqing"></text>
						<text class="label">课程：</text>
						<text class="value">{{item.courseName}}</text>
					</view>
					<view class="rowItem">
						<text class="iconfont icon-banjiguanli"></text>
						<text class="label">学员：</text>
						<text class="value">{{item.studentName}}</text>
					</view>
					<view class="rowItem">
						<text class="iconfont icon-shijian"></text>
						<text class="label">时间：</text>
						<text class="value">{{item.classTime}}</text>
					</view>
					<view class="rowItem">
						<text class="iconfont icon-banji"></text>
						<text class="label">班级：</text>
						<text class="value">{{item.className}}</text>
					</view>
					<view class="rowItem">
						<text class="iconfont icon-geren"></text>
						<text class="label">老师：</text>
						<text class="value">{{item.teacherName}}</text>
					</view>
					<view class="rowItem">
						<text class="iconfont icon-blackboard"></text>
						<text class="label">教室：</text>
						<text class="value">{{item.classRoom}}</text>
					</view>
					<view class="rowItem">
						<text class="iconfont icon-wufengxian"></text>
						<text class="label">状态：</text>
						<text class="value">{{item.isRoll?'已上课':'未上课'}}</text>
					</view>
				</view>
			</block>
		</view>  
		<view class="kong" v-if="!showList.length">
			<emptyBox ></emptyBox>
		</view>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
	import uniCalendar from '@/pagesA/components/uni-calendar/uni-calendar.vue';
	import TL from "@/common/tool.js";
	export default {
		computed: {
			...mapState({
				userInfo:state=>state.user.userInfo,
				isLogin: state => state.user.isLogin,
			})
		
		},
		components:{
			uniCalendar
		},
		data() {
			return {
				weekFmt:['周日','周一','周二','周三','周四','周五','周六'],
				dateStr:'',
				selectDateStr:'',
				selectYear:2020,
				selectMonth:0,
				selectDate:1,
				oldList:[],	//接口数据
				dottedList:[],
				showList:[],
				isShow:false,
				tiaokeList:[]		//调课列表
			}
		},
		methods: {
			change(e){
				console.log(e);
				this.selectDateStr=e.year.toString()+e.month.toString();
				this.selectMonth=parseInt(e.month)-1;
				this.selectYear=parseInt(e.year);
				this.dateStr=e.fulldate;
				if(e.extraInfo.data){
					this.showList=e.extraInfo.data;
				}else{
					this.showList=[];
				}
				this.getStatus();
				this.getRollMember();
			},
			monthChange(e){
				this.dottedList=[];
				this.oldList=[];
				this.showList=[];
				this.selectDateStr=e.year.toString()+(e.month<10?('0'+e.month.toString()):e.month.toString());
				this.selectMonth=parseInt(e.month)-1;
				this.selectYear=parseInt(e.year);
				this.getData();
			},
			getData(){
				this.$store.dispatch("apiGetClassTable",{
					userId:this.userInfo.userId,
					date:this.selectDateStr
				}).then(res=>{
					console.log(res);
					if(res.data.data.length){
						let _arr=res.data.data.sort((a,b)=>{
							return TL.compareTimeStr(a.begin,b.begin)
						})
						this.oldList=_arr
						this.tiaokeList=res.data.data.filter(x=>{
							return x.classType=='3' && x.adjustDate
						})
						this.createTable();
						this.getStatus();
						this.getRollMember();
					}else{
						this.dottedList=[];
					}
				})
				
			},
			createTable(){
				let _lastDay=TL.getLastDay(parseInt(this.selectDateStr.substr(0,4)),parseInt(this.selectDateStr.substr(4,2))-1);	//月份最后一天
				let _chuli=[];
				for(let n=1;n<=_lastDay;n++){
					let _date=new Date();
					_date.setFullYear(this.selectYear);
					_date.setMonth(this.selectMonth);
					_date.setDate(n);
					let _dateStr=TL.datePattern(_date,'yyyy-MM-dd');
					let _week=this.weekFmt[_date.getDay()];
					this.oldList.forEach((x,i)=>{
						if(x.classDate==_week && TL.dateStrToNum(_dateStr)>=TL.dateStrToNum(x.startDate) &&  (!x.endTime || (x.endTime && TL.dateStrToNum(_dateStr)<=TL.dateStrToNum(x.endTime)))){
							x.isRoll=false;
							
							let _index=_chuli.findIndex((s)=>{
								return s.date==_dateStr;
							})
							if(_index>-1){		//已有打点
								_chuli[_index].data.push(x)
								
							}else{			//没有打点
								let _obj={
									date:_dateStr,
									info:'有课',
									data:[]
								}
								_obj.data.push(x)
								_chuli.push(_obj)
							}
							if(_dateStr==this.dateStr){//当天显示数据
								this.showList.push(x)
							}
						}
					})
				}
				
				if(this.tiaokeList.length){
					this.tiaokeList.forEach((o,p)=>{
						_chuli.forEach((x,i)=>{
							if(x.date==o.adjustDate){
								if(x.data.length>0){
									x.data.forEach((y,z)=>{
										if(o.timetableId==y.id ){
											_chuli[i].data.splice(z,1)
										}
									})
								}
							}
						})
					})
				}
				_chuli.forEach((x,i)=>{
					if(!x.data.length){
						_chuli.splice(i,1)
					}
				})
				this.dottedList=_chuli;
			},
			getStatus(){
				if(this.showList.length){	//有课
					this.$store.dispatch("apiGetRollStatus",{
						begin:this.dateStr
					}).then(res=>{
						let _arr=[];
						this.showList.forEach(x=>{
							if(res.data.data.length){
								res.data.data.forEach(i=>{
									if(i.class_id==x.classId && i.begin==x.begin && i.timetableId==x.id){
										x.isRoll=true;
									}else{
										x.isRoll=false;
									}
								})
							}else{
								x.isRoll=false;
							}
							_arr.push(x);
						})
						this.showList=_arr;
						this.isShow=false;
						this.isShow=true;
					})
				}
				
			},
			getRollMember(){
				if(this.showList.length){
					this.$store.dispatch("apiGetRollMember",{
						userId:this.userInfo.userId
					}).then(res=>{
						let _list=[];
						this.showList.forEach(x=>{
							if(res.data.data.length){
								let _arr=[];
								res.data.data.forEach(i=>{
									if(i.classId==x.classId){
										_arr.push(i.name)
									}
								})
								x.studentName=_arr.join(',')
								_list
							}
						})
						this.isShow=false;
						this.isShow=true;
					})
				}
				
				
			}
		},
		onLoad(){
			let _date=new Date();
			this.selectMonth=_date.getMonth();
			this.selectYear=_date.getFullYear();
			this.selectDateStr=TL.datePattern(_date,'yyyyMM');
			this.dateStr=TL.datePattern(_date,'yyyy-MM-dd');
			this.getData();
			uni.$on("monthChange",payload=>{
				console.log(payload);
				this.selectDateStr=payload.year.toString()+payload.month.toString();
				this.selectMonth=parseInt(payload.month)-1;
				this.selectYear=parseInt(payload.year);
				this.dateStr=payload.fulldate;
				this.dottedList=[];
				this.oldList=[];
				this.showList=[];
				this.getData();
			})
			
		},
		// 下拉刷新
		onPullDownRefresh() {
			
				setTimeout(() => {
					this.dottedList=[];
					this.oldList=[];
					this.showList=[];
					let _date=new Date();
					this.selectMonth=_date.getMonth();
					this.selectYear=_date.getFullYear();
					this.selectDateStr=TL.datePattern(_date,'yyyyMM');
					this.dateStr=TL.datePattern(_date,'yyyy-MM-dd');
					this.getData();
		
					uni.stopPullDownRefresh();
				}, 1500);
			
		},
	}
</script>

<style lang="less">
	page{
		background-color: #f6f6f6;
	}
	.tableList{
		display: flex;
		flex-direction: column;
		border-top: 10upx solid #f6f6f6;
		.row{
			display: flex;
			flex-direction: column;
			padding: 20upx 30upx;
			border-bottom: 10upx solid #f6f6f6;
			background-color: #FFFFFF;
			.rowItem{
				display: flex;
				align-items: center;
				margin-bottom: 10upx;
				.iconfont{
					font-size: 30upx;
					margin-right: 10upx;
					color: #ffc333;
				}
				.label{
					font-size: 28upx;
					color: #222222;
				}
				.value{
					font-size: 28upx;
					color: #222222;
				}
				
			}
			.rowItem:last-child{
				margin-bottom: 0;
			}
		}
	}
	.kong{
		padding-bottom: 60upx;
	}
</style>
